<template>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名" v-model="name">
      </div>
      <div class="form-group">
        <label>评论内容</label>
        <textarea class="form-control" rows="6" placeholder="评论内容" v-model="comment"></textarea>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="button" class="btn btn-default pull-right" @click="add">提交</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
  export default {
    name: 'Add',
    data () {// 必须要用data函数式方法来声明，固定写法，不能使用data: 配置来指定
       return {
         name: '',
         comment: ''
       }
    },
    props: {
      addComment: {// 详细的定义从父类传入的属性类型（方法）、方法名称（addComment）、是否为require
        type: Function,
        require: true
      }
    },
    methods: {
      add () {// 定义添加方法
        //1. 判断录入的参数是否合法
        const name = this.name.trim()
        const comment = this.comment.trim()
        if(!name || !comment){
          alert('用户名或评论为空！')
          return
        }

        //2. 封装成newComment对象， 注意name和comment不能出错
        const newComment = {
          name, // 注意不能错误
          comment
        }

        //3. 存入comments数组中
        this.addComment(newComment)

        //4. 清空输入框内容
        this.name = ''
        this.comment = ''

      }
    }

  }
</script>

<style scoped>

</style>
